<template>
  <div class="form">
    <h1>This is my page - Form</h1>
    <h3>checkbox</h3>
    <p><el-checkbox v-model="bool">接受此协议</el-checkbox></p>
    <el-button type="success" :disabled="!bool" @click="btn"
      >立即注册</el-button
    >
    <h3>disabled</h3>
    <div style="margin-top: 20px">
      <el-radio-group v-model="radio4" size="mini" @change="r4">
        <el-radio-button label="上海"></el-radio-button>
        <el-radio-button label="北京"></el-radio-button>
        <el-radio-button label="广州"></el-radio-button>
        <el-radio-button label="深圳"></el-radio-button>
      </el-radio-group>
    </div>
    <p>{{ checkList }}</p>
    <p>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="禁用" disabled></el-checkbox>
        <el-checkbox label="选中且禁用" disabled></el-checkbox>
      </el-checkbox-group>
    </p>
    <h2>indeterminate状态</h2>
    <p>{{ cities }}</p>
    <p>{{ checkedCities }}</p>
    <p>{{ checkAll }}</p>
    <p>{{ isIndeterminate }}</p>
    <p>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
    </p>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
      :min="1"
      :max="3"
    >
      <el-checkbox v-for="city in cities" :label="city" :key="city">{{
        city
      }}</el-checkbox>
    </el-checkbox-group>
    <el-main>
      <el-row :gutter="25">
        <el-col :span="12">
          <el-input
            v-model="user"
            clearable
            placeholder="yonghuming"
          ></el-input>
          <el-input v-model="pass" placeholder="密码" show-password></el-input>
          <el-input
            suffix-icon="el-icon-phone"
            placeholder="带图标的"
          ></el-input>
          <el-input
            size="mini"
            prefix-icon="el-icon-star-off"
            placeholder="带图标的"
          ></el-input>
          <el-input placeholder="123">
            <template slot="prepend">Http://</template>
          </el-input>
          <el-button>立即注册</el-button>
        </el-col>
        <el-col :span="12">
          <el-input
            type="textarea"
            :rows="2"
            autosize
            placeholder="请输入内容"
            v-model="textarea"
          ></el-input>

          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="textarea2"
          ></el-input>
        </el-col>
      </el-row>
    </el-main>
    <p><el-input v-model="input" placeholder="请输入内容"></el-input></p>
  </div>
</template>
<script>
const cityOptions = ["上海", "广东", "北京", "深圳"];

export default {
  name: "Form",
  data() {
    return {
      radio4: "上海",
      bool: true,
      checkList: ["选中且禁用", "复选框 A"],
      cities: cityOptions,
      checkAll: false,
      checkedCities: ["上海", "北京"],
      isIndeterminate: true,
      input: "",
      user: "",
      pass: "",
      textarea: "",
      textarea2: "",
    };
  },
  methods: {
    btn() {
      alert("注册成功");
    },
    r4(e) {
      console.log("选中的结果是：" + e);
      console.log("最新选中的结果是：" + this.radio4);
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
  },
};
</script>